<template>
	<view class="wrapper">
		<div class="user-info">
			<u-avatar :size="50"
				src="https://worduniapp.oss-cn-beijing.aliyuncs.com/20240110222041_e2fc686655d9402dad1f9fee267a8456.ico"></u-avatar>
			<div class="username">{{username}}</div>
		</div>
		<div class="detail-info">
			<div class="detail">
				<div>运动次数</div>
				<u-count-to :startVal="0" :endVal="runCount"></u-count-to>
			</div>
			<u-line direction="col" style="width: 30rpx;height: 120rpx;"></u-line>
			<div class="detail">
				<div>运动公里</div>
				<u-count-to :startVal="0" :endVal="runKilometer"></u-count-to>
			</div>
			<u-line direction="col" style="width: 30rpx;height: 120rpx;"></u-line>
			<div class="detail">
				<div>今日听歌次数</div>
				<u-count-to :startVal="0" :endVal="musicCount"></u-count-to>
			</div>
		</div>
		<div class="echats" ref="chartContainer"></div>
		<view :prop="weeklyData" :change:prop="test.onweeklyDataChange"></view>
		<view :prop="week" :change:prop="test.onweekChange"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				musicCount: 0,
				runCount: 0,
				runKilometer: 0,
				weeklyData: [0,0,0,0,0,0,0],
				week:['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			}
		},
		mounted() {
			this.username = uni.getStorageSync('username');
			this.getList();
		},
		methods: {
			getList() {
				let that = this;
				// 获取听歌次数
				uni.request({
					url: 'http://yiyuy.nat300.top/user/getMusicCount?username=' + that.username,
					method: 'GET',
					success(res) {
						that.musicCount = res.data.data
					},
					fail(res) {
						console.log(res)
					}
				})
			
				// 获取运动次数和运动公里数
				uni.request({
					url: 'http://yiyuy.nat300.top/user/getRunDetail?username=' + that.username,
					method: 'GET',
					success(res) {
						that.runCount = res.data.data[0]
						that.runKilometer = res.data.data[1];
					},
					fail(err) {
						console.log(err)
					}
				})

				// 获取最近一周运动情况
				uni.request({
					url: 'http://yiyuy.nat300.top/user/getWeeklyRunKilometer?username=' + that.username,
					method: 'GET',
					success(res) {
						that.week = res.data.data[0]
						that.weeklyData = res.data.data[1]
					},
					fail(err) {
						console.log(err)
					}
				})
			},
		}
	}
</script>

<script module='test' lang='renderjs'>
	import * as echarts from 'echarts' // 引入ECharts库

	export default {
		data() {
			return {
				chart: undefined,
				weeklyData: [],
				week: [],
			}
		},
		mounted() {
			this.initChart();
		},
		methods: {
			redrawChart() {
				const option = {
					title: {
						text: '最近一周运动情况' // 标题文本
					},
					xAxis: {
						type: 'category', // x轴类型为类目轴
						data: this.week // x轴类目数据
					},
					yAxis: {
						type: 'value' // y轴类型为数值轴
					},
					series: [{
						type: 'bar', // 图表类型为柱状图
						data: this.weeklyData // 柱状图数据
					}]
				}
				this.chart.setOption(option)
			},
			onweekChange(newValue, oldValue, ownerInstance, instance) {
				this.week = newValue
				if ( this.chart !== undefined ) {
					this.redrawChart()
				}
			},
			onweeklyDataChange(newValue, oldValue, ownerInstance, instance) {
				this.weeklyData = newValue
				if ( this.chart !== undefined ) {
					this.redrawChart()
				}
			},
			initChart() {
				const chartContainer = this.$refs.chartContainer
				this.chart = echarts.init(chartContainer)
				this.redrawChart()
			}
		}
	}
</script>

<style>
	.wrapper {
		width: 100%;
		height: 100%;
	}

	.user-info {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 5%;
	}

	.username {
		font-size: 24px;
		margin-left: 10px;
	}

	.detail-info {
		display: flex;
		justify-content: space-between
	}

	.detail {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 33%;
	}

	.echats {
		width: 100%;
		height: 1100rpx;
		margin-top: 20px;
	}
</style>